<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 全局样式重置 */
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f4;
        }

        h1 {
            margin-top: 50px;
            text-align: center;
            color: #333;
            font-size: 2.5rem;
        }

        /* 主容器样式 */
        .main-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }

        /* 盒子样式 */
        .box {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            width: 400px;
            margin-bottom: 20px;
            transition: opacity 0.3s ease;
        }

        .box div {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 190px;
            background-color: #333;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

        .box div a {
            text-decoration: none;
            color: white;
            font-size: 1.2rem;
            transition: color 0.3s ease;
        }

        .box div:hover {
            background-color: #555;
        }

        .box div a:hover {
            color: #ff6b6b;
        }

        /* 分页样式 */
        .pagination {
            margin-top: 20px;
        }

        .pagination ul {
            list-style-type: none;
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .pagination li {
            padding: 10px 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .pagination li.active {
            background-color: #ff6b6b;
            color: white;
        }

        .pagination li:hover {
            background-color: #eee;
        }

        /* 登录链接样式 */
        .login {
            margin-top: 20px;
        }

        .login a {
            text-decoration: none;
            color: #333;
            font-size: 1.1rem;
            transition: color 0.3s ease;
        }

        .login a:hover {
            color: #ff6b6b;
        }

        /* 颜色样式 */
        .text1 {
            background-color: #ff6b6b;
        }

        .text2 {
            background-color: #6b6bff;
        }

        .text3 {
            background-color: #6bff6b;
        }

        .text4 {
            background-color: #ffd700;
        }

        .text5 {
            background-color: #ff69b4;
        }

        .text6 {
            background-color: #00ced1;
        }

        .text7 {
            background-color: #ffa07a;
        }

        .text8 {
            background-color: #9370db;
        }

        .text9 {
            background-color: #32cd32;
        }

        .text10 {
            background-color: #ff4500;
        }

        .text11 {
            background-color: #87cefa;
        }

        .text12 {
            background-color: #da70d6;
        }

        .text13 {
            background-color: #f0e68c;
        }

        .text14 {
            background-color: #ff1493;
        }

       .text15 {
            background-color: #ff6347;  
       }
    </style>
</head>

<body>
    <h1>欢迎光临</h1>
    <div class="main-container">
        <div class="box">
            <div class="text1">
                <a href="成绩管理.html">成绩管理</a>
            </div>
            <div class="text2">
                <a href="旋转木马案例.html">旋转木马</a>
            </div>
            <div class="text3">
                <a href="课表.html">课程表</a>
            </div>
            <div class="text4">
                <a href="计算实时收入.html">计算实时收入</a>
            </div>
        </div>
        <div class="box" style="display: none;">
            <div class="text5">
                <a href="购物车.html">购物车</a>
            </div>
            <div class="text6">
                <a href="记账清单.html">记账清单</a>
            </div>
            <div class="text7">
                <a href="评论.html">评论区</a>
            </div>
            <div class="text8">
                <a href="加载模拟器.html">加载模拟器</a>
            </div>
        </div>
        <div class="box" style="display: none;">
            <div class="text9">
                <a href="倒计时模拟器.html">倒计时模拟器</a>
            </div>
            <div class="text10">
                <a href="猜数字游戏.html">猜数字游戏</a>
            </div>
            <div class="text11">
                <a href="任务清单.html">任务清单</a>
            </div>
            <div class="text12">
                <a href="奔跑的小熊.html">奔跑的小熊</a>
            </div>
        </div>
        <div class="box" style="display: none;">
            <div class="text13">
                <a href="2D旋转.html">2D旋转</a>
            </div>
            <div class="text14">
                <a href="随机点名.html">随机点名</a>
            </div>
            <div class="text15">
                <a href="3D旋转.html">3D旋转</a>
            </div>
            <div class="text16">
                <a href="课表案例.html">课表案例</a>
            </div>
        </div>
        <div class="box" style="display: none;">
            <div class="text17">
                <a href="#">敬请期待</a>
            </div>
        </div>
        <div class="pagination">
            <ul>
                <li class="first">&lt;&lt;上一页</li>
                <li class="active" data-id="0">1</li>
                <li data-id="1">2</li>
                <li data-id="2">3</li>
                <li data-id="3">4</li>
                <li data-id="4">5</li>
                <li class="last">下一页&gt;&gt;</li>
            </ul>
        </div>
        <div class="login">
            <a href="登录界面.html">返回登录</a>
        </div>
    </div>
    <script>
        const ul = document.querySelector('ul');
        const li = document.querySelectorAll('li');
        const box = document.querySelectorAll('.box');
        let currentPage = 0; // 新增：当前页码

        ul.addEventListener('click', function (e) {
            if (e.target.nodeName === 'LI') {
                document.querySelector('.active').classList.remove('active');
                e.target.classList.add('active');
                box.forEach((b) => {
                    b.style.display = 'none';
                });
                if (e.target.classList.contains('first')) { // 新增：处理上一页按钮
                    if (currentPage > 0) {
                        currentPage--;
                    }
                } else if (e.target.classList.contains('last')) { // 新增：处理下一页按钮
                    if (currentPage < box.length - 1) {
                        currentPage++;
                    }
                } else {
                    currentPage = parseInt(e.target.dataset.id);
                }
                box[currentPage].style.display = 'grid';
                // 更新激活状态
                li.forEach((item, index) => {
                    if (index === currentPage + 1) {
                        item.classList.add('active');
                    } else {
                        item.classList.remove('active');
                    }
                });
            }
        });
    </script>
</body>

</html>